<template>
  <div class="elHeader">
    <div class="left-logo">
      <div
        class="logo-box"
        :class="{ 'small-logo': $route.meta.top }"
        @click="backHome"
      >
        <el-popover
          placement="bottom"
          width="auto"
          trigger="hover"
          popper-class="header-popper"
          transition="el-zoom-in-top"
          content="返回工作台"
          :disabled="!$route.meta.top"
        >
          <i class="logo" slot="reference"></i>
        </el-popover>
        <i class="logoText"></i>
      </div>
      <div class="project-drop troila-form" v-if="$route.meta.top">
        <el-select
          v-setwidth
          placeholder="请选择用户状态"
          :value="projectId"
          popper-class="troila-popper"
          @change="changeProject"
        >
          <el-option
            v-for="(item, index) in projectList"
            :key="index"
            :label="item.name"
            :value="item.id"
          ></el-option>
        </el-select>
      </div>
      <ul class="menus">
        <li
          v-for="(item, i) in menuListFn()"
          :key="i"
          :class="{
            active: judgeActive(item, $route.meta.top),
          }"
          @click="itemClick(item, i)"
        >
          <el-dropdown
            type="text"
            size="medium"
            placement="bottom"
            v-if="
              item.children && item.children.length > 0 && item.id == otherKey
            "
          >
            <div>{{ item.menuName }}</div>
            <el-dropdown-menu slot="dropdown" class="troila-popper colorBox">
              <el-dropdown-item
                :class="{
                  active: judgeActive(val, $route.meta.top),
                }"
                v-for="(val, index) in item.children"
                :key="index"
                @click.native="itemClick(val, max + 1)"
                >{{ val.menuName }}</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
          <div v-else>{{ item.menuName }}</div>
        </li>
      </ul>
    </div>
    <template v-if="isLogin">
      <div class="right-login-info">
        <!-- <el-popover
          placement="bottom"
          width="auto"
          trigger="hover"
          popper-class="colorBox"
        >
          <ul class="colors">
            <li
              v-for="v in colors"
              :key="v"
              :class="[
                v,
                v === color || (v == 'default' && !color) ? 'active' : '',
              ]"
              @click="setColor(v)"
            ></li>
          </ul>
          <i class="system" slot="reference">设置</i>
        </el-popover> -->
        <el-popover
          placement="bottom"
          width="auto"
          trigger="hover"
          popper-class="header-popper"
          transition="el-zoom-in-top"
          content="项目设置"
          v-if="$route.meta.top"
        >
          <el-button type="text" slot="reference" @click="projectBtn('system')">
            <unit-icon
              class="troila-icon headerIcon"
              type="system"
              size="17"
              color="#989EAA"
            />
          </el-button>
        </el-popover>
        <el-popover
          placement="bottom"
          width="auto"
          trigger="hover"
          popper-class="header-popper"
          transition="el-zoom-in-top"
          content="项目成员"
          v-if="$route.meta.top"
        >
          <el-button
            type="text"
            slot="reference"
            @click="projectBtn('addUser')"
          >
            <unit-icon
              class="troila-icon headerIcon"
              type="addUser"
              size="17"
              color="#989EAA"
            />
          </el-button>
        </el-popover>
        <el-dropdown type="text" size="medium">
          <i class="userImg">{{ userName }}</i>
          <el-dropdown-menu slot="dropdown" class="troila-popper colorBox">
            <el-dropdown-item @click.native="showDialog = true"
              >修改密码</el-dropdown-item
            >
            <!-- v-limit="`user:editPassword`" -->
            <el-dropdown-item @click.native="loginOut">退出</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </template>
    <template v-else></template>
    <dialog-password v-model="showDialog" />
  </div>
</template>
<script>
import dialogPassword from './dialog/passwordForm'
import { setMenus, getMenus } from '@/assets/js/auth.js'
import { judgeLink } from '@/assets/js/utils.js'
export default {
  name: 'mainHeader',
  components: {
    dialogPassword,
  },
  data() {
    return {
      colors: ['default', 'gray', 'green', 'orange', 'red', 'black', 'purple'],
      showDialog: false,
      menuList: getMenus(),
      currentUrl: '',
      currentSubUrl: '',
      max: 6,
      otherKey: 'menu_other',
    }
  },
  computed: {
    color() {
      return this.$store.state.color
    },
    isLogin() {
      return this.$store.getters.login
    },
    userName() {
      return this.$store.getters.name
    },
    menuList_() {
      let list = this.menuList.filter((v) => this.judgeActive(v))
      return list.length > 0 && list[0].children ? list[0].children : []
    },
    projectId() {
      return this.$store.state.project.projectId
    },
    projectList() {
      return this.$store.state.project.projectList
    },
    dom() {
      let v = this.$store.state.dom.width
      this.max =
        v > 1200
          ? 6
          : v > 1000
          ? 5
          : v > 900
          ? 4
          : v > 800
          ? 3
          : v > 700
          ? 2
          : 1
      return this.$store.state.dom
    },
  },
  watch: {
    $route(to, from) {
      if (to.path.lastIndexOf('/') != 0) {
        let attr = to.path.split('/')
        this.currentUrl = '/' + attr[1]
        this.currentSubUrl = this.$route.path
      } else {
        this.currentUrl = to.path
        this.currentSubUrl = ''
      }
      this.judgeJump()
    },
    'dom.width'(v) {
      this.max =
        v > 1200
          ? 6
          : v > 1000
          ? 5
          : v > 900
          ? 4
          : v > 800
          ? 3
          : v > 700
          ? 2
          : 1
    },
  },
  methods: {
    menuListFn() {
      let list = JSON.parse(
        JSON.stringify(
          this.$route.meta.top
            ? this.menuList.filter((v) => this.judgeActive(v))
            : this.menuList
        )
      )
      this.$route.meta.top && list.length > 0 && list[0].children
        ? (list = list[0].children)
        : null
      const max = this.max
      if (list.length > max) {
        let children = list.slice(max - 1, list.length)
        list = [
          ...list.slice(0, max - 1),
          { id: this.otherKey, menuName: max == 1 ? '菜单' : '更多', children },
        ]
      }
      return list
    },
    judgeActive(item, j) {
      let url = j ? this.currentSubUrl : this.currentUrl
      // console.log(url)
      if (item.id === this.otherKey) {
        let choose = item.children.filter(
          (item) =>
            url == item.menuAddr ||
            (this.$route.meta &&
              this.$route.meta.pCode &&
              item.menuCode &&
              this.$route.meta.pCode.indexOf(item.menuCode) > -1)
        )
        return choose.length > 0
      }
      return (
        url == item.menuAddr ||
        (this.$route.meta &&
          this.$route.meta.pCode &&
          item.menuCode &&
          this.$route.meta.pCode.indexOf(item.menuCode) > -1)
      )
    },
    setColor(v) {
      this.$store.dispatch('setColor', v)
    },
    loginOut() {
      this.$store
        .dispatch('user/logout')
        .then(async () => {
          this.$router.push('/')
        })
        .catch(() => {})
    },
    itemClick(item, index) {
      this.currentIndex = item.id
      if (!item.menuAddr) {
        return false
      } else {
        // console.log(item.menuAddr, this.$route.path)
        if (item.menuAddr) {
          this.$store.commit('keepFn', false)
          this.$emit('showprogressBar') //刷新
          if (this.$route.path == item.menuAddr) {
            this.$emit('refrash') //刷新
          } else {
            this.$router.push(item.menuAddr)
            this.drawer = false
          }
        }
      }
    },
    judgeJump() {
      if (this.$route.path == '/mainIndex') {
        //登录过来的
        let path =
          this.menuList.length > 0
            ? this.menuList[0].children && this.menuList[0].children.length > 0
              ? this.menuList[0].children[0].menuAddr
              : this.menuList[0].menuAddr
            : '/reception'
        if (path === this.$route.path) {
          this.refresh()
          return
        }
        this.$router.replace({
          path: path,
        })
      } else {
        // 路由验证权限
        judgeLink(this.$route, (link) => {
          this.$router.replace({
            path: link,
          })
        })
      }
    },
    getMenuList() {
      this.$store.commit('user/CHANHE_LOGIN', true)
      this.$store.dispatch('user/getMenus').then((res) => {
        this.menuList = [...res]
        for (let i in this.menuList) {
          if (
            this.$route.meta &&
            this.$route.meta.pCode &&
            this.menuList[i].menuCode &&
            this.$route.meta.pCode.indexOf(this.menuList[i].menuCode) > -1
          ) {
            this.isShowCode = this.menuList[i].menuCode
            break
          }
        }
        setMenus(this.menuList)
        this.judgeJump()
      })
    },
    setDom(json) {
      if (!json || typeof json !== 'object') {
        return
      }
      let dom = JSON.parse(JSON.stringify(this.$store.state.dom))
      for (let k in json) {
        dom[k] = json[k]
      }
      this.$store.commit('domFn', dom)
    },
    changeProject(v) {
      this.$store.commit('project/projectIdFn', v)
    },
    projectBtn(type) {
      this.$store.commit(`project/${type}FlagFn`, true)
    },
    backHome() {
      this.$router.push('/')
      this.drawer = false
    },
  },
  created() {
    if (this.$route.path.lastIndexOf('/') != 0) {
      let attr = this.$route.path.split('/')
      this.currentUrl = '/' + attr[1]
      this.currentSubUrl = this.$route.path
    } else {
      this.currentUrl = this.$route.path
      this.currentSubUrl = ''
    }
    // dom监听
    this.setDom({ width: window.innerWidth, height: window.innerHeight })
    window.onresize = function () {
      this.setDom({ width: window.innerWidth, height: window.innerHeight })
    }.bind(this)
    this.getMenuList()
  },
}
</script>
<style scoped>
.elHeader {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  /*padding:0 30px;*/
  width: 100%;
  padding: 0;
  background-color: #fff;
  height: 100%;
}
.elHeader .left-logo {
  /* width:300px; */
  /* flex:0 0 300px; */
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: 15px;
  margin: 0 5% 0 10px;
  padding: 10px 0;
}
.logo-box {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
}
i.logo {
  display: block;
  width: 36px;
  height: 41px;
  background: url('../../../static/images/logo.png') no-repeat;
  margin-right: 12px;
}
i.logoText {
  display: block;
  width: 138px;
  height: 34px;
  background: url('../../../static/images/logo_text.png') no-repeat;
}
.menus {
  display: -webkit-flex;
  display: -moz-flex;
  display: flex;
  justify-content: start;
  align-items: center;
  /*padding:0 30px;*/
  width: auto;
  padding: 0;
  background-color: #fff;
  height: 100%;
  margin-left: 60px;
}
.menus > li {
  margin-left: 30px;
  line-height: 30px;
  padding: 0 10px;
  white-space: nowrap;
  cursor: pointer;
  transition: color 0.2s ease;
  position: relative;
}
.menus > li::after {
  content: '';
  display: block;
  position: absolute;
  height: 2px;
  border-radius: 1px;
  left: 16px;
  right: 16px;
  bottom: 0;
  opacity: 0;
  transition: all 0.2s ease;
}
.menus > li.active::after {
  opacity: 1;
}
.elHeader .right-login-info {
  /* width:300px; */
  /* flex:0 0 300px; */
  display: -webkit-inline-flex;
  display: -moz-inline-block;
  display: inline-flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  font-size: 15px;
}
.right-login-info > * {
  margin-left: 14px;
  padding: 0 10px;
  font-size: 15px;
}
.right-login-info > *:last-child {
  margin: 0 20px 0 24px;
}
.right-login-info i {
  display: block;
  width: auto;
  height: 34px;
  line-height: 35px;
  opacity: 1;
  transition: opacity 0.15s ease;
  cursor: pointer;
  white-space: nowrap;
}
.right-login-info i:hover {
  opacity: 0.8;
}
.right-login-info i::before {
  content: '';
  display: inline-block;
  vertical-align: top;
  height: 34px;
  margin-right: 10px;
}
.userImg::before {
  width: 34px;
}
.user::before {
  width: 25px;
}
.system::before {
  width: 18px;
}
.exit::before {
  width: 21px;
}
.colors {
  font-size: 0;
  padding: 0 2px;
}
.colors > li {
  display: inline-block;
  vertical-align: top;
  width: 14px;
  height: 14px;
  border-radius: 4px;
  margin-right: 10px;
  border: 1px solid #fff;
  cursor: pointer;
  transition: all 0.15s;
}
.colors > li:last-child {
  margin-right: 0;
}
.colors > li.default {
  background-color: #4d6ee8;
}
.colors > li.gray {
  background-color: #3c6995;
}
.colors > li.green {
  background-color: #18ab9a;
}
.colors > li.orange {
  background-color: #ff9b57;
}
.colors > li.red {
  background-color: #c96767;
}
.colors > li.black {
  background-color: #272730;
}
.colors > li.purple {
  background-color: #4b5071;
}
.colors > li.default.active,
.colors > li.default:hover {
  border-color: #4d6ee8;
}
.colors > li.gray.active,
.colors > li.gray:hover {
  border-color: #3c6995;
}
.colors > li.green.active,
.colors > li.green:hover {
  border-color: #18ab9a;
}
.colors > li.orange.active,
.colors > li.orange:hover {
  border-color: #ff9b57;
}
.colors > li.red.active,
.colors > li.red:hover {
  border-color: #c96767;
}
.colors > li.black.active,
.colors > li.black:hover {
  border-color: #272730;
}
.colors > li.purple.active,
.colors > li.purple:hover {
  border-color: #4b5071;
}
.colors > li::before {
  content: '';
  display: block;
  width: 12px;
  height: 12px;
  background: url('../../assets/images/icon_active.png') center center/100% 100%
    no-repeat;
  margin: 1px;
  opacity: 0;
  transform: scale(0);
  transition: all 0.15s;
}
.colors > li.active::before {
  opacity: 1;
  transform: scale(1);
}
.el-dropdown-menu--medium.colorBox {
  padding: 8px 0;
}
/* small-logo */
.small-logo {
  margin-left: 80px;
}
.small-logo .logoText {
  display: none;
}
.project-drop {
  width: 250px;
  padding-left: 50px;
  box-sizing: content-box;
}
.project-drop >>> .el-select,
.project-drop.troila-form >>> .el-input {
  width: 100%;
}
.right-login-info >>> button {
  height: 32px;
  padding: 0;
}
</style>